<template>
  <div class="ranking" style="min-height: 750px">
    <div class="block">
      <!--<el-date-picker v-model="selDateTimes" type="date" value-format="yyyy-MM-dd" @change="changes" placeholder="选择日期"-->
                      <!--size="mini" style="margin-top: 10px ;margin-bottom:20px;width: 150px;">-->
      <!--</el-date-picker>-->
      <!--<el-button style="margin-left:15px;" type="primary" size="mini" @click="prevDate()">前一天</el-button>-->
      <!--<el-button style="margin-left:15px;" type="primary" size="mini" @click="nextDate()">后一天</el-button>-->
      <el-button type="primary" size="mini" style="margin-left:15px;" @click="addProfitUp()">发布活动</el-button>
      <div style="width:500px;float:right;margin-top:15px;display:flex;align-items:center;">
        <span style="padding-left:15px;">今日消耗金额：{{rnums}}</span>
        <span style="padding-left:15px;">总消耗金额：{{znums}}</span>
        <span style="padding-left:15px;">更新时间：{{selDateTimes}}</span>
      </div>
    </div>
    <el-table v-loading="loading" :data="shopArr" border style="width: 100%;margin-top:21px;" header-row-class-name="a"
              :default-sort="{prop: 'num', order: 'descending'}" show-summary ref="userList">
      <el-table-column prop="" label="序号" width="100" type="index">
      </el-table-column>
      <el-table-column prop="" label="店铺" sortable>
        <template slot-scope="scope">
          <a :href="'https://detail.tmall.com/item.htm?id=' + scope.row.link">{{scope.row.shop}}</a>
        </template>
      </el-table-column>
      <!--<el-table-column prop="" label="宝贝id" sortable width="150">-->
      <!--<template slot-scope="scope">-->
      <!--<a :href="'https://detail.tmall.com/item.htm?id=' + scope.row.link">{{scope.row.link}}</a>-->
      <!--</template>-->
      <!--</el-table-column>-->
      <el-table-column prop="name" label="产品名称" width="">
      </el-table-column>
      <el-table-column prop="principal" label="本金" width="">
      </el-table-column>
      <el-table-column prop="" label="佣金" width="">
      </el-table-column>
      <el-table-column prop="" label="总金额" width="150">
      </el-table-column>
      <el-table-column prop="" label="评价设置" width="">
      </el-table-column>
      <el-table-column prop="" label="每日自动评价单数" width="150">
      </el-table-column>
      <el-table-column prop="num" label="当日完成单" sortable width="150">
      </el-table-column>
      <el-table-column prop="remainingHNum" label="本时段剩余单量" sortable width="150">
      </el-table-column>
      <el-table-column prop="remainingNum" label="剩余单量" sortable width="150">
      </el-table-column>
      <el-table-column prop="" label="总单数" sortable width="150">
        <template slot-scope="scope">
          {{scope.row.num * 1 + scope.row.remainingNum * 1}}
        </template>
      </el-table-column>
      <el-table-column prop="" label="恶意退款人数" sortable width="150">
        <template slot-scope="scope">

        </template>
      </el-table-column>
      <el-table-column prop="" label="恶意退款率" sortable width="150">
        <template slot-scope="scope">

        </template>
      </el-table-column>
      <el-table-column prop="" label="月恶意退款率" sortable width="150">
        <template slot-scope="scope">

        </template>
      </el-table-column>
      <!--  <el-table-column prop="" label="日佣金数" sortable width="120">
            <template slot-scope="scope">
                x
            </template>
        </el-table-column>
        <el-table-column prop="" label="日总金额" sortable width="120">
            <template slot-scope="scope">
                x
            </template>
        </el-table-column>-->
      <el-table-column prop="" label="操作" sortable width="">
        <template slot-scope="scope">
          <el-button type="primary" size="mini" style="" @click="addProfitUp(scope.row.link,1)"
                     v-if="scope.row.remainingNum == null">开始
          </el-button>
          <el-button type="primary" size="mini" style="" @click="addProfitUp(scope.row.link,0)"
                     v-else>暂停
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
  export default {
    name: "AdminRanking",
    data() {
      return {
        loading: true,
        value1: "",
        shopArr: [],
        rnums: "",
        znums: "",
        selDateTimes:this.convertToDate(new Date())
      };
    },
    methods: {
      changes(){
        console.log(this.selDateTimes);
        let _this = this;
        _this.axios.get("/api/api.php?id=getRanking&startTime1="+(new Date(_this.selDateTimes).getTime()/1000)
          +"&stopTimes="+(Date.parse(new Date())/1000)).then(data => {
          _this.shopArr =data.data.data;
        });
      },
      getRowClass({row, column, rowIndex, columnIndex}) {
        if (rowIndex === 0) {
          return 'background:rgb(144,195,252);color:white;text-align:center;font-size:9px;font-weight:500;'
        } else {
          return ''
        }
      },
      prevDate() {
        //前一天
        let odata_before = new Date(
          new Date(this.selDateTimes).getTime() - 24 * 60 * 60 * 1000
        );
        //计算当前日期 -1
        this.selDateTimes = this.convertToDate(odata_before); //格式化日期并赋值
        console.log(this.selDateTimes);
        let _this = this;
        _this.axios.get("/api/api.php?id=getRanking&startTime1="+(new Date(_this.selDateTimes).getTime()/1000)+
          "&stopTimes="+(Date.parse(new Date())/1000)).then(data => {
          _this.shopArr =data.data.data;
          console.log(data.data,'前一天');
        });
      },
      nextDate() {
        //后一天
        let odata_after = new Date(
          new Date(this.selDateTimes).getTime() + 24 * 60 * 60 * 1000
        );
        //计算当前日期 +1
        this.selDateTimes = this.convertToDate(odata_after); //格式化日期并赋值
        console.log(this.selDateTimes);
        let _this = this;
        _this.axios.get("/api/api.php?id=getRanking&startTime1="+(new Date(new Date().toLocaleDateString()).
        getTime()/1000)+"&stopTimes="+(new Date(_this.selDateTimes).getTime()/1000)).then(data => {
          _this.shopArr =data.data.data;
          console.log(data.data,'后一天');
        });
      },
      convertToDate(date) {
        var date = new Date(date);
        var y = date.getFullYear();
        var m = date.getMonth() + 1;
        var d = date.getDate();
        m = m < 10 ? "0" + m : m; //月小于10，加0
        d = d < 10 ? "0" + d : d; //day小于10，加0
        return y + "-" + m + "-" + d;
      },
      addProfitUp(a, b) {
        this.shopArr = [];
        this.axios.get("/api/api.php?id=zt&link=" + a + "&status=" + b).then(data => {
          this.initArr()
        });
      },
      initArr() {
        let _this = this;
        _this.shopArr = [];
        _this.axios.get("/api/api.php?id=getRanking&startTime1="+(new Date(new Date().toLocaleDateString()).getTime()/1000)+"&stopTimes="+(Date.parse(new Date())/1000)).then(data => {
          _this.rnums = data.data.rnum;
          _this.znums = data.data.znum;
          let back = data.data;
          _this.shopArr =back.data;
          console.log(_this.shopArr);
          _this.loading = false
        });
      }
    },
    mounted() {
      this.initArr();
      console.log(this.selDateTimes);
    }
  };
</script>
<style lang="scss">
  .ranking {

    .paperz {
      height: 90%;
      padding: 15px;
    }
    .el-input--mini .el-input__icon {
      /*margin-top:-5px;*/
    }
    .demo-table-expand {
      font-size: 0;
      margin-left: 49.5px;
    }

    .demo-table-expand label {
      width: 90px;
      color: #99a9bf;
    }

    .demo-table-expand .el-form-item {
      margin-right: 0;
      margin-bottom: 0;
      width: 100%;
    }

    .taskDialog {
      width: 760px;
    }

    .taskDialog1 {
      width: 1749.5px;
    }

    .el-dialog__body {
      padding: 5px;
    }

    .el-form-item {
      margin-bottom: 6px;
    }

    .el-form-item__label {
      line-height: 18px;
    }

    .el-form-item__content {
      line-height: 18px;
    }

    .tbb {
      margin-left: 435px;
    }

    /* .blcok {
                      margin: -48px 0;
                    } */

    a {
      color: #3f35f4;
    }

    .pc_rank_header {
      text-align: center;
    }

    .pc_rank_header > div span {
      display: inline-block;
      width: 200px;
    }

    .day_rank_content span {
      color: lightcoral;
    }

    .day_rank_content p {
      margin: 0;
    }

    .day_rank_content_wrap {
      display: flex;
      border-bottom: 1px solid #e6e6e6;
    }

    .day_rank_content_wrap:first-of-type {
      border-top: 1px solid #e6e6e6;
    }

    .day_rank_content_wrap > div {
      flex: 1;
      text-align: center;
    }

    .day_rank_content_wrap .day_rank_content:not(:last-of-type) {
      border-right: 1px solid #e6e6e6;
    }

    .day_rank h3 {
      text-align: center;
    }

    .group_rank {
      padding: 18px 5px;
    }

    .group_rank {
      text-align: center;
    }

    .day_group_rank {
      display: flex;
      text-align: center;
    }

    .day_group_rank div {
      flex: 1;
      border: 1px solid #dddddd;
    }

    .adminTask_select select {
      cursor: pointer;
      outline: none;
      border-radius: 5px;
      border: 1px solid #dcdfe6;
      line-height: 28px;
      height: 28px;
      padding: 0 18px;
      color: #606266;
    }

    .adminTask_select select:focus {
      border-color: #409eff;
    }

    .select_up {
      display: inline-block;
      position: relative;
      left: -29px;
      top: 2px;
      width: 16px;
      height: 16px;
      transform: rotate(0deg);
      background: url("../../assets/select_down.png") right center no-repeat;
      background-size: 16px 16px;
    }

    .rotateUp {
      transition: 0.2s ease;
      transform: rotate(180deg);
    }

    select {
      appearance: none;
      -moz-appearance: none;
      -webkit-appearance: none;
      -ms-appearance: none;
    }

    select::-ms-expand {
      display: none;
    }

    .keywordsVal {
      position: relative;
      top: 25px;
      left: 20px;
    }

    .keywordsVal .el-form-item__error {
      margin-left: 100px;
    }

    .task .el-dialog__body {
      padding-left: 20px;
    }

    .coupon_setting {
      display: flex;
      align-items: center;
      width: 1150px;
      padding: 5px;
      border: 1px solid #dfdddd;
    }

    .coupon_setting .el-form-item--mini.el-form-item {
      margin-bottom: 0;
    }

    .task_num span {
      color: lightcoral;
    }

    .coupon_item {
      display: inline-block;
      margin: 5px 0;
    }

    .keywordsVal {
      position: relative;
      top: 25px;
      left: 20px;
    }

    .keywordsVal .el-form-item__error {
      margin-left: 100px;
    }

    .task .el-dialog__body {
      padding-left: 20px;
    }

    select.adminTask_select {
      cursor: pointer;
      outline: none;
      border-radius: 5px;
      border: 1px solid #dcdfe6;
      line-height: 28px;
      height: 28px;
      padding: 0 20px;
      color: #606266;
    }

    select.adminTask_select {
      cursor: pointer;
      width: 80px;
    }

    select.adminTask_select:focus {
      border-color: #409eff;
    }

    .diyA {
      font-size: 12px;
      display: inline-block;
      padding: 5px 10px;
      border-radius: 3px;
      color: #fff;
      background-color: #409eff;
    }

    .own span {
      color: lightcoral;
    }

    .other span {
      color: deepskyblue;
    }

  }
</style>
